﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Pager.aspx.cs" Inherits="ControlExplorer.C1Wizard.Pager" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Wizard" TagPrefix="wijmo" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Pager" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <wijmo:C1Wizard ID="C1Wizard1" runat="server" NavButtons="None">
        <Steps>
            <wijmo:C1WizardStep ID="C1WizardStep1" Title="步骤1">
               Wijmo Wizard控件通过导航页面将数据区域分离成多个表单进行显示，这样既可以很好的保存屏幕的实际状态，又能简化输入工作。
            </wijmo:C1WizardStep>
            <wijmo:C1WizardStep ID="C1WizardStep2" Title="步骤2">
                Wijmo Video Player控件为ASP.NET系统提供了HTML5视频播放器。支持在线流媒体、视频播放、书签、嵌入广告、全屏播放和音量控制等功能。
            </wijmo:C1WizardStep>
            <wijmo:C1WizardStep ID="C1WizardStep3" Title="步骤3">
                Wijmo Upload控件为您提供简易的文件上传功能。
            </wijmo:C1WizardStep>
            <wijmo:C1WizardStep ID="C1WizardStep4" Title="步骤4">
               Wijmo Tree控件以多层次树形结构呈现条目，并且可轻松增加动画、样式和拖放功能。
            </wijmo:C1WizardStep>
            <wijmo:C1WizardStep ID="C1WizardStep5" Title="步骤5">
               Wijmo Tabs控件可将多个页面内容组织到不同标签下的控件，易于组织和导航Web页面的内容。
            </wijmo:C1WizardStep>
            <wijmo:C1WizardStep ID="C1WizardStep6" Title="步骤6">
                Wijmo SuperPanel控件可在您的Web程序中添加自定义滚动、调整大小，圆角，还可给任意面板增加阴影。
            </wijmo:C1WizardStep>
            <wijmo:C1WizardStep ID="C1WizardStep7" Title="步骤7">
                Wijmo Splitter控件通过能移动和折叠的滑块将容器控件分为单独的两个面板，该控件还支持嵌套使用。使用该控件能让您网站的布局更加专业、优美。
            </wijmo:C1WizardStep>
        </Steps>
    </wijmo:C1Wizard>

    <wijmo:C1Pager runat="server" ID="C1Pager1" Mode="NextPreviousFirstLast" OnClientPageIndexChanged="onClientPageIndexChanged"/>

    
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ControlOptions" runat="server">

    <p>
    页面调度模式:
    </p> 
	<input type="radio" value="Default" name="set1" checked="checked" />默认
	<input type="radio" value="Text" name="set1" />文本
    <input type="radio" value="Custom" name="set1" />自定义文本


    <script type="text/javascript">

        function onClientPageIndexChanged() {
            var pageIndex = $("#<%=C1Pager1.ClientID%>").c1pager("option", "pageIndex");
            $("#<%=C1Wizard1.ClientID%>").c1wizard({ activeIndex: pageIndex });
        };

        $(document).ready(function () {

            $(':radio').change(function (e) {
                switch ($(this).val()) {
                    case "Default":
                        $("#<%=C1Pager1.ClientID%>").c1pager('option', {
                            firstPageClass: "ui-icon-seek-first",
                            previousPageClass: "ui-icon-seek-prev",
                            nextPageClass: "ui-icon-seek-next",
                            lastPageClass: "ui-icon-seek-end",
                            firstPageText: "First",
                            previousPageText: "Previous",
                            nextPageText: "Next",
                            lastPageText: "Last"
                        });
                        break;

                    case "Text":
                        $("#<%=C1Pager1.ClientID%>").c1pager('option', {
                            firstPageClass: "",
                            previousPageClass: "",
                            nextPageClass: "",
                            lastPageClass: "",
                            firstPageText: "第一页",
                            previousPageText: "前一页",
                            nextPageText: "下一页",
                            lastPageText: "最后一页"
                        });
                        break;

                    case "Custom":
                        $("#<%=C1Pager1.ClientID%>").c1pager('option', {
                            firstPageClass: "",
                            previousPageClass: "",
                            nextPageClass: "",
                            lastPageClass: "",
                            firstPageText: "|<",
                            previousPageText: "<",
                            nextPageText: ">",
                            lastPageText: ">|"
                        });
                        break;
                }
            });
        });
	</script>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Description" runat="server">

<p>
这个示例使用C1Pager控件作为导航按钮。 
</p>

<p>
设置<b>NavButtons</b> 属性为"None"，可以把内置的导航按钮隐藏起来。
</p>

<p>
然后我们直接在C1Wizard之后添加C1Pager控件，通过实现一些简单的客户端脚本代码和设置页面调度控件的<b>OnClientPageIndexChanged</b>属性来产生它们之间的索引关系。
</p>

</asp:Content>
